<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体对比</title>
    <link rel="stylesheet" href="./ttf/index.css" />
    <link rel="stylesheet" href="./woff2/index.css" />
</head>

<body>
    <div style="display: flex;justify-content: flex-start;align-items: center;">
        <div>
            <div style="font-family: 'PingFangSC-Ultralight';">PingFangSC-Ultralight 极细体(mac自带)</div>
            <div style="font-family: 'PingFangSC-Thin';">PingFangSC-Thin 纤细体(mac自带)</div>
            <div style="font-family: 'PingFangSC-Light';">PingFangSC-Light 细体(mac自带)</div>
            <div style="font-family: 'PingFangSC-Regular';">PingFangSC-Regular 常规体(mac自带)</div>
            <div style="font-family: 'PingFangSC-Medium';">PingFangSC-Medium 中黑体(mac自带)</div>
            <div style="font-family: 'PingFangSC-Semibold';">PingFangSC-Semibold 中粗体(mac自带)</div>
        </div>
        <div>
            <div style="font-family: 'PingFangSC-Ultralight-ttf';">PingFangSC-Ultralight 极细体(ttf字体包)</div>
            <div style="font-family: 'PingFangSC-Thin-ttf';">PingFangSC-Thin 纤细体(ttf字体包)</div>
            <div style="font-family: 'PingFangSC-Light-ttf';">PingFangSC-Light 细体(ttf字体包)</div>
            <div style="font-family: 'PingFangSC-Regular-ttf';">PingFangSC-Regular 常规体(ttf字体包)</div>
            <div style="font-family: 'PingFangSC-Medium-ttf';">PingFangSC-Medium 中黑体(ttf字体包)</div>
            <div style="font-family: 'PingFangSC-Semibold-ttf';">PingFangSC-Semibold 中粗体(ttf字体包)</div>
        </div>
        <div>
            <div style="font-family: 'PingFangSC-Ultralight-woff2';">PingFangSC-Ultralight 极细体(woff2字体包)</div>
            <div style="font-family: 'PingFangSC-Thin-woff2';">PingFangSC-Thin 纤细体(woff2字体包)</div>
            <div style="font-family: 'PingFangSC-Light-woff2';">PingFangSC-Light 细体(woff2字体包)</div>
            <div style="font-family: 'PingFangSC-Regular-woff2';">PingFangSC-Regular 常规体(woff2字体包)</div>
            <div style="font-family: 'PingFangSC-Medium-woff2';">PingFangSC-Medium 中黑体(woff2字体包)</div>
            <div style="font-family: 'PingFangSC-Semibold-woff2';">PingFangSC-Semibold 中粗体(woff2字体包)</div>
        </div>
    </div>
</body>

</html>